<template>
	<uni-popup ref="popup" type="bottom">
		<view class="background">
			<view style="width: 50%;height: 60rpx;display: inline-block;">
				<text @tap="pickerCancel" class="pickerCancel">取消</text>
			</view>
			<view style="width: 50%;height: 60rpx;display: inline-block;text-align: right;">
				<text @tap="pickerConfirm" class="pickerConfirm">确定</text>
			</view>
			<picker-view class="picker-view" :value="value" @change="bindChange">
				<picker-view-column>
					<view v-for="(item,index) in yearOptions" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in monthOptions" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in dayOptions" :key="index">{{item}}日</view>
				</picker-view-column>
				<picker-view-column v-show="precision == 'second' || precision == 'minute' || precision == 'hour'">
					<view v-for="(item,index) in hourOptions" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column v-show="precision == 'second' || precision == 'minute'">
					<view v-for="(item,index) in minuteOptions" :key="index">{{item}}分</view>
				</picker-view-column>
				<picker-view-column v-show="precision == 'second'">
					<view v-for="(item,index) in secondOptions" :key="index">{{item}}秒</view>
				</picker-view-column>
			</picker-view>
		</view>
	</uni-popup>
</template>
<script>
	export default {
		name: "DatetimeCheckPicker",
		props: {
			precision: {
				type: String,
				default: 'second'
			}
		},
		data() {
			return {
				yearOptions: [],
				monthOptions: [],
				dayOptions: [],
				hourOptions: [],
				minuteOptions: [],
				secondOptions: [],
				year: 2021,
				month: 1,
				day: 9,
				hour: 0,
				minute: 0,
				second: 0,
				value: [],
				indicatorStyle: `height: 50rpx;`
			};
		},
		created() {
			// this.init()
		},
		watch: {
			month() {
				this.changeDayOptions()
			},
			year() {
				this.changeDayOptions()
			}
		},
		methods: {
			init() {
				const dateTime = new Date()
				this.year = dateTime.getFullYear()
				this.month = dateTime.getMonth() + 1
				this.day = dateTime.getDate()
				this.hour = dateTime.getHours()
				this.minute = dateTime.getMinutes()
				this.second = dateTime.getSeconds()
				this.precisionDispose()
				this.initOptions()
				this.intValue()
			},
			precisionDispose() {
				if(this.precision == 'hour'){
					this.minute = 0
					this.second = 0
				} else if (this.precision == 'minute'){
					this.second = 0
				}
			},
			show() {
				this.init()
				this.$refs.popup.open()
			},
			intValue() {
				this.value = []
				this.value.push(this.getIndex(this.year, this.yearOptions))
				this.value.push(this.getIndex(this.month, this.monthOptions))
				this.value.push(this.getIndex(this.day, this.dayOptions))
				this.value.push(this.getIndex(this.hour, this.hourOptions))
				this.value.push(this.getIndex(this.minute, this.minuteOptions))
				this.value.push(this.getIndex(this.second, this.secondOptions))
			},
			getIndex(value, arr) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] == value) {
						return i
					}
				}
			},
			initOptions() {
				this.initYearOptions()
				this.initMonthOptions()
				this.initDayOptions()
				this.initHourOptions()
				this.initMinuteOptions()
				this.initSecondOptions()
			},
			initYearOptions() {
				for (var year = 1970; year < 2200; year++) {
					this.yearOptions.push(year)
				}
			},
			initMonthOptions() {
				for (var month = 1; month <= 12; month++) {
					this.monthOptions.push(month)
				}
			},
			initDayOptions() {
				switch (this.month) {
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12:
						this.setDayOptions(1, 31)
						break
					case 2:
						this.setFebruaryDateOptions()
						break
					default:
						this.setDayOptions(1, 30)
				}

			},
			setFebruaryDateOptions() {
				const isLeapYear = ((this.year % 4 == 0) && (this.year % 100 != 0)) || (this.year % 400 == 0)
				if (isLeapYear) {
					this.setDayOptions(1, 29)
				} else {
					this.setDayOptions(1, 28)
				}
			},
			setDayOptions(start, end) {
				this.dayOptions = []
				for (var day = start; day <= end; day++) {
					this.dayOptions.push(day)
				}
			},
			initHourOptions() {
				for (var hour = 0; hour <= 24; hour++) {
					this.hourOptions.push(hour)
				}
			},
			initMinuteOptions() {
				for (var minute = 0; minute <= 60; minute++) {
					this.minuteOptions.push(minute)
				}
			},
			initSecondOptions() {
				for (var second = 0; second <= 60; second++) {
					this.secondOptions.push(second)
				}
			},
			pickerCancel() {
				this.$refs.popup.close()
			},
			pickerConfirm() {
				let label = this.zeroFill(this.month) + '-' + this.zeroFill(this.day) +
					' ' + this.zeroFill(this.hour) + ':' + this.zeroFill(this.minute) 
				if(this.precision == 'hour' || this.precision == 'minute'){
					label = label.substring(0,16)
				}
				const value = new Date(this.year, this.month - 1, this.day,
					this.hour, this.minute, this.second, 0)
				this.$emit("confirm", {
					label: label,
					value: value
				})
				this.$refs.popup.close()
			},
			zeroFill(value) {
				if (value < 10) {
					return '0' + value
				}
				return value
			},
			changeMonth() {
				if (this.month == 2) {
					this.setFebruaryDateOptions()
				}
			},
			bindChange(e) {
				this.year = this.yearOptions[e.detail.value[0]]
				this.month = this.monthOptions[e.detail.value[1]]
				this.day = this.dayOptions[e.detail.value[2]]
				this.hour = this.hourOptions[e.detail.value[3]]
				this.minute = this.minuteOptions[e.detail.value[4]]
				this.second = this.secondOptions[e.detail.value[5]]
			},
			changeDayOptions() {
				this.initDayOptions()
				const hasExcpetionOfDay = this.day > this.dayOptions[this.dayOptions.length - 1]
				if (hasExcpetionOfDay) {
					this.value[2] = this.dayOptions.length - 1
					this.day = this.dayOptions[this.value[2]]
				}
			}
		}
	}
</script>
<style scoped>
	.background {
		background-color: #FFFFFF;
		width: 100%;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		text-align: center;
	}

	.pickerCancel {
		color: rgb(96, 98, 102);
		padding-left: 40rpx;
		padding-top: 50rpx;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.pickerConfirm {
		margin-right: 40rpx;
		color: rgb(41, 121, 255);
		font-size: 28rpx;
		line-height: 80rpx;
	}
</style>
